import 'package:flutter/material.dart';
import 'package:xim/common/util/collection.dart';

class ProfileScreen extends StatelessWidget {

  Color bgColor = const Color(0xffededed);
  Color fgColor = const Color(0xffffffff);
  final double menuVerticalPadding = 24;

  ProfileScreen({Key? key}) : super(key: key);
  String avatar = "https://upload.jianshu.io/users/upload_avatars/9547801/bb70e361-d8be-4f50-a4bc-1a1079c1d2f1.jpg";

  List<_Menu> menus = [
    _Menu(Icons.settings_outlined, "设置"),
    _Menu(Icons.login, "登录设置"),
    _Menu(Icons.question_mark_outlined, "问题反馈"),
    _Menu(Icons.info_outline, "关于"),
    _Menu(Icons.power_settings_new_outlined, "退出"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      body: Column(
        children: [
          Container(
            height: 240,
            color: fgColor,
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: _userHeader(),
          ),
          const SizedBox(height: 18,),
          Container(
            color: fgColor,
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: Column(
              children: [
                 SizedBox(height: menuVerticalPadding,),
                ..._menuItems(gap: menuVerticalPadding),
                 SizedBox(height: menuVerticalPadding,),
              ],
            ),
          )
        ],
      ),
    );
  }

  /// 用户头部
  Widget _userHeader(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          children: [
            ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(8)),
                child: Image.network(avatar, width: 70,)
            ),
            const SizedBox(width: 12,),
            const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("HanLiner", style: TextStyle(fontSize: 18),),
                SizedBox(height: 8,),
                Text("账号：1000000"),
              ],
            )
          ],
        ),
        const Row(
          children: [
            Icon(Icons.qr_code, size: 14,),
            SizedBox(width: 12,),
            Icon(Icons.arrow_forward_ios_rounded, size: 14,)
          ],
        )
      ],
    );
  }

  /// 菜单栏
  List<Widget> _menuItems({double gap=4, bool showDivider=true}){
    Widget item(_Menu menu)=> Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            Icon(menu.icon, color: Colors.blueAccent, size: 20,),
            const SizedBox(width: 6,),
            Text(menu.title),
          ],
        ),
        const Icon(Icons.arrow_forward_ios_rounded, size: 12,)
      ],
    );
    return List.generate(menus.length, (index) => item(menus[index]))
        .splitJoin(Column(
      children: [
        SizedBox(height: gap/2,),
        const Divider(height: 4,),
        SizedBox(height: gap/2,),
      ],
    ));
  }

}

class _Menu {
  final IconData icon;
  final String title;
  _Menu(this.icon, this.title);
}
